Angular Data Binding
Data binding உங்கள் component-ன் state-ஐ template-க்கு connect செய்கிறது.
Data Binding Essentials
- Connect component state and template markup.
- Text-க்கு interpolation பயன்படுத்தவும், DOM properties-க்கு property binding பயன்படுத்தவும், மற்றும் user actions-க்கு event binding பயன்படுத்தவும்.
- Display மற்றும் update state செய்ய form inputs-க்கு two-way binding பயன்படுத்தவும்.
- Attributes-ஐ [attr.*] உடன் bind செய்யவும், மற்றும் classes/styles-ஐ [class.*]/[style.*] உடன் bind செய்யவும்.
Data Binding Syntax
{{ value }}
[prop]="value"
(event)="handler($event)"
[(ngModel)]="value"Notes
- Related: Interpolation basics-க்கு Templates, user input handle செய்ய Events, மற்றும் state-அடிப்படையில் content show/hide செய்ய Conditional Rendering ஆகியவற்றை காணவும்.
- For two-way binding with ngModel, import FormsModule.
Basic Data Binding
Interpolation: {{ value }} text print செய்கிறது.
Property binding: [prop]="value" element/DOM properties set செய்கிறது.
Event binding: (event)="handler($event)" user actions-க்கு listen செய்கிறது.
Basic Binding Syntax
{{ name }}
[value]="name"
(input)="name = $any($event.target).value"Example
Values bind செய்யவும் மற்றும் events handle செய்யவும் view component state-ல் sync-ல் வைக்க:
Basic Data Binding Example
import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
template: `
<h3>Data Binding</h3>
<input [value]="name" (input)="name = $any($event.target).value" placeholder="Type your name">
<p>Hello {{ name }}!</p>
<button (click)="count = count + 1">Clicked {{ count }} times</button>
<button [disabled]="isDisabled">Can't click me</button>
`
})
export class App {
name = 'Angular';
count = 0;
isDisabled = true;
}
bootstrapApplication(App);Example Explained
- {{ name }}: Interpolation current name value-ஐ text ஆக print செய்கிறது.
- [value]="name": Property binding component state-லிருந்து input-ன் value set செய்கிறது.
- (input)="name = $any($event.target).value": Event binding input-ன் current text-லிருந்து name update செய்கிறது.
- (click)="count = count + 1": Button click ஆகும் போது count field increment செய்கிறது.
- [disabled]="isDisabled": isDisabled true ஆக இருக்கும் போது button disable செய்கிறது.
Notes
- Keep expressions light: {{ ... }}-ல் heavy work avoid செய்யவும்; component-ல் compute செய்யவும்.
- No side effects: State mutate செய்யவும் அல்லது state-changing functions bindings-ல் call செய்யவும் கூடாது.
- Accessibility: நீங்கள் elements disable செய்யும் போது, ஏன் என்பதை communicate செய்யவும் (e.g., helper text or ARIA) அதனால் users confused ஆகமாட்டார்கள்.
Two-way Binding
Sync template and component: page ↔ component.
Form controls-க்கு [(ngModel)] பயன்படுத்தவும்.
Conceptually equals [value] + (input).
FormsModule தேவை.
Two-way Binding Syntax
<input [(ngModel)]="name">Example
Form values read மற்றும் update செய்ய [(ngModel)] பயன்படுத்தவும்:
Two-way Binding Example
import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, FormsModule],
template: `
<h3>Two-way Binding (ngModel)</h3>
<label>
Name: <input [(ngModel)]="name" placeholder="Type your name" />
</label>
<label style="margin-left:12px">
Favorite:
<select [(ngModel)]="favorite">
<option value="Angular">Angular</option>
<option value="TypeScript">TypeScript</option>
<option value="JavaScript">JavaScript</option>
</select>
</label>
<p>Hello {{ name || 'friend' }}!</p>
<p>Favorite: {{ favorite }}</p>
`
})
export class App {
name = 'Angular';
favorite = 'Angular';
}
bootstrapApplication(App);Example Explained
- [(ngModel)]="name": Input-ஐ name field-க்கு two-way bind செய்கிறது (FormsModule தேவை).
- [(ngModel)]="favorite": Select மற்றும் favorite field-ஐ sync-ல் வைக்கிறது.
- Concept: Equivalent to [value] plus (input) wiring under the hood.
Note
[(ngModel)] won't work unless FormsModule is imported.
Attribute Binding
சில values attributes ஆகும், DOM properties அல்ல (e.g., colspan).
Property இல்லாத போது [attr.*] பயன்படுத்தவும்.
Classes மற்றும் styles-க்கு [class.*] மற்றும் [style.*] பயன்படுத்தவும்.
Attribute Binding Syntax
[attr.colspan]="span"
[class.active]="isActive"
[style.color]="color"Example
Component state-லிருந்து attributes, classes, மற்றும் styles bind செய்யவும்:
Attribute Binding Example
import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule],
styles: [`
table { border-collapse: collapse; margin-top: 10px; }
th, td { border:1px solid #ccc; padding:8px 10px; }
.toolbar { display:flex; gap:10px; align-items:center; }
`],
template: `
<h3>Attribute Binding (attr.*)</h3>
<div class="toolbar">
<label>Colspan: <input type="range" min="1" max="3" [value]="span" (input)="span = +$any($event.target).value"> {{ span }}</label>
<label>Title: <input [value]="title" (input)="title = $any($event.target).value"></label>
</div>
<table [attr.title]="title">
<thead>
<tr><th>A</th><th>B</th><th>C</th></tr>
</thead>
<tbody>
<tr>
<td [attr.colspan]="span" style="background:#f9fbff">colspan={{ span }}</td>
<td *ngIf="span < 2">B</td>
<td *ngIf="span < 3">C</td>
</tr>
</tbody>
</table>
`
})
export class App {
span = 1;
title = 'Data table';
}
bootstrapApplication(App);Example Explained
- [attr.title]="title": Table-ன் title attribute-ஐ title field-லிருந்து set செய்கிறது.
- [attr.colspan]="span": Cell-ன் colspan attribute-ஐ span-ல் உள்ள number-க்கு bind செய்கிறது.
- Range input: $event.target.value-ஐ read செய்வதன் மூலம் span adjust செய்கிறது; template change-ஐ reflect செய்கிறது.
- Conditional cells: Current span-அடிப்படையில் extra columns show/hide செய்ய *ngIf பயன்படுத்துகிறது.
Note
Use property binding when available; use [attr.*] only when no property exists (e.g., colspan).